<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div :style="{display:'flex',justifyContent: 'center'}">
        <!-- :style="{ display: 'flex', justifyContent: 'center', alignItems: 'center' }" -->
        <div id="app" v-if="msg.length>0">
            <table>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>语文成绩</th>
                    <th>数学成绩</th>
                    <th>英语成绩</th>
                    <th>总成绩</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in msg" :key="item.id">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td :class="{red: item.chinese < 60}">{{item.chinese}}</td>
                    <td :class="{red: item.math < 60}">{{item.math}}</td>
                    <td :class="{red: item.english < 60}">{{item.english}}</td>
                    <td>{{ sum(item) }}</td>
                    <td>
                        <button @click="remove(item.id)">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>总分</td>
                    <td></td>
                    <td>{{totalChinese}}</td>
                    <td>{{totalMath}}</td>
                    <td>{{totalEnglish}}</td>
                    <td></td>
                    <td></td>
                </tr>

            </table>
        </div>

        <div v-else class="none">
            <span>暂无数据</span>
        </div>

        <div id="insert">
            <table>
                <label for="">学号： <input v-model></input></label><br>
                <label for="">姓名： <input></input></label><br>
                <label for="">语文成绩：<input></input></label><br>
                <label for="">数学成绩：<input></input></label><br>
                <label for="">英语成绩：<input></input></label><br>
                <button>添加</button>
            </table>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el: "#app",
            data: {
                msg: [
                    { id: 1, name: "xiaohan", chinese: 100, math: 100, english: 100 },
                    { id: 2, name: "xiaoxin", chinese: 99, math: 90, english: 91 },
                    { id: 3, name: "xiaoli", chinese: 48, math: 100, english: 90 },
                    { id: 4, name: "xiaoxiao", chinese: 100, math: 100, english: 100 }
                ]
            },
            methods: {
                remove(id) {
                    return this.msg = this.msg.filter((item) => {
                        if (item.id !== id) return true
                    })
                },
                sum(item) {
                    return item.chinese + item.english + item.math
                }
            },
            computed: {
                // cnt代表的是计数器总和 item代表数组遍历的对象 0表示将cnt初始化为0
                totalChinese() {
                    return this.msg.reduce((cnt, item) => {
                        cnt = cnt + item.chinese
                        return cnt
                    }, 0)
                },
                totalMath() {
                    return this.msg.reduce((cnt, item) => {
                        cnt = cnt + item.math
                        return cnt
                    }, 0)
                },
                totalEnglish() {
                    return this.msg.reduce((cnt, item) => {
                        cnt = cnt + item.english
                        return cnt
                    }, 0)
                }
            }
        })
    </script>
</body>

</html>